* {
  box-sizing: border-box;
}

      html {
        height: 100vh;
        width: 100vw;
      }
body { 
  -webkit-font-smoothing: antialiased;
   display: flex;
   height: 100vh;
   width: 100%;
	flex-wrap: wrap;
	color: #3d3b3b;


/*  min-height: 100vh;*/
}

.fixed_container{
  display: flex;
  width: 40%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  height: 100%;
  flex-wrap: wrap;
/*  height: 100vh;
  position: fixed;
    z-index: 1;
  top: 0;
  left: 0;

  overflow-x: hidden;*/

}

.dymanic_container {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 60%;
  overflow: auto;
	height: 100vh;

}

/* p{
	color: #3d3b3b;
} */

.intro_wrapper{
 font-family: "Oswald",sans-serif;
 margin-top: 25%;
 flex-basis: 100%;

}

.socialmedia_wrapper{
display: flex;
flex-basis: 30%;
margin: auto;
}

.socialmedia_wrapper div{
	flex: 20%;
	justify-content: space-between;
	text-align: center;

}

.socialmedia_wrapper img{
width: 40%;

}

.welcoming_container{
	 display: block;
	 font-size: 5em;
	 font-weight: 400;
	 text-align: center;
}

.welcoming_container p{
margin-bottom: 2%;
}
	
.brief_container{
	 display: block;
	 font-size: 2.5em;
	 font-weight: 400;
	 text-align: center;
	 margin-top: 0;
	 margin-bottom: 0;
}


.brief_container p{
	 margin-top: 0;
	 margin-bottom: 0;
}

.brief_container p:last-child{
	/*text-align: left;*/
}


.mission_container{
	  display: block;
	  width: 40%;
	margin: 10% auto auto;
	font-family: "Rubik", sans-serif;
	  font-weight: 200;
	  font-size: 0.9em;
	  color: #575555;
	  line-height: 1.5em;
}

.accent_text{
color: #A80410;
font-weight: 600;

}

.aboutme_container{
	display: block;
	padding: 25%;
	font-family: "Rubik", sans-serif;
	font-weight: 200;
	font-size: 1.2em;
	/* color: #575555; */
	color: #0d0c0d;
	line-height: 1.5em;

}


.motto{
	font-family: 'Merriweather', sans-serif;
	font-style: italic;
	font-size:  1.1em;
	text-align: center;
	color: #0d0c0d;
	

}


/*------------------Card design------------------------*/


img {
  border-radius: 5px 5px 0 0;
  width:100%
}

.container {
  padding: 2px 16px;
}


.flip-card {
  perspective: 1000px;
  transition: 0.3s;
  flex: 30%;
  max-width: 30%;
  border-radius: 15px;
  margin-bottom: 5%;
  height: 650px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 15px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
  border-radius: 15px;
}

.flip-card-back {
padding: 20% 15% 20% 15%;
  color: black;
  transform: rotateY(180deg);
  border-radius: 15px;
  vertical-align: middle;
}

.btn_style {
	 background: #a80410;
	 color: #fff;
	 cursor: pointer;
	 font-size: 1em;
	 padding: 1rem;
	 border: 0;
	 float: left;
	 bottom: 1%;
	 transition: all 0.5s;
	 border-radius: 10px;
	 width: auto;
	 position: relative;
	font-family: "Oswald", sans-serif;
	 font-weight: 400;
	 margin-top: 10%;

}
 .btn_style:after {
	 position: absolute;
	 opacity: 0;
}
 .btn_style:hover {
	 background: #FA3140;
	 border-radius: 30px;
	 box-shadow: 0 6px 15px #00ff61;
}
 .btn_style :hover::after {
	 opacity: 1;
	 transition: all 0.5s;
}


/*----------------------------------------------------*/




.projects{
	display: flex;
	justify-content: space-around;
	width: 100%;
	flex-wrap: wrap;
	padding: 5%;
  display: -webkit-flex; /* old versions of Chrome/Safari/Opera */
  display: -ms-flexbox; /* IE10 */
  -webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */
}

.project_type, .project_brief{

	  font-family: "Rubik", sans-serif;
	  font-weight: 200;
	  font-size: 1em;
	  color: #575555;
	  line-height: 1.5em;
	  margin-left: 4%;
	  margin-right: 4%;

}

h4{
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	font-size: 1.7em;
	margin: 1% 4%;
}

.tag{
	display: flex;
	font-family: "Oswald", sans-serif;
	width: 100%;
	justify-content: space-around;
	text-align: center;
}

.tag p{
	flex-basis: 30%;
	font-size: 1.2em;
	white-space: nowrap;
}


 .icon{

 	}    

.icon-instagram{

	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}

.icon-twitter{

	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
} 

.icon-llinkedin{
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}

#resumePage{
	display: none;
	text-align: center;
	padding-top: 11%;
}


/*------------Media Queries ----------------------*/

/*They use media queries to target landscape phones (576px), tablets (768px), laptops (992px) and extra large desktop screens (1200px).*/


/*
1440px: styles apply to screens 1440px wide and above
1280px: styles apply to screens 1280px wide and above
Desktop (base): styles apply to all devices unless overridden at other device breakpoints
Tablet: styles apply to screens 991px wide and below
Mobile landscape: styles apply to screens 767px wide and below
Mobile portrait: styles apply to screens 478px wide and below ---
*/



/* Default: Extra-small devices such as small phones (less than 640px) */

/* Extra Small devices (320px and below) */
@media only screen and (max-width: 320px) {
	body {
		height: 100vh;
		margin: 0;
	}

	.fixed_container {
		width: 100%;
		box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
		height: auto;
		overflow: auto;
	}

	.dymanic_container {
		width: 100%;
		flex-basis: 100%;
		flex-wrap: wrap;
		height: auto;
		overflow: auto;

	}


	.flip-card {
		flex: 100%;
		max-width: 100%;

	}

	.container{
		padding: 0px;
	}
	.intro_wrapper {
		margin-top: 20%;
		padding-bottom: 0px;
	}

	.socialmedia_wrapper {
		flex-basis: 60%;
		margin: auto auto 20%;

	}

	.welcoming_container {
		font-size: 3em;
		text-align: center;
	}

	.welcoming_container p {
		margin-bottom: 2%;
	}

	.brief_container {
		font-size: 1.5em;
		text-align: center;


	}

	.mission_container {
		width: 80%;
		margin-bottom: 20%;
		text-align: center;

	}


	.flip-card {
		margin-top: 10%;
		flex: 100%;
		max-width: 100%;
		height: 530px;
	}


	.projects {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.project_type, .project_brief {

		font-size: 0.9em;


	}

	h4 {
		font-size: 1.3em;

	}

	.mission_container {

		font-size: 0.8em;

	}

	.tag p {
		font-size: 0.9em;

	}

	.nav_container {
		margin-right: 0;
		width: 100%;
		
	}

	nav{
		float: none;
	}
	nav ul {
		align-items: center;
		justify-content: center;
	}

	.aboutme_container{
		padding: 15%;
		font-size: 1em;
		line-height: 1.5em;

	}


}

/* Small devices (480px and below) */
@media only screen and (min-width: 321px) and (max-width: 480px){
/* @media only screen and (max-width: 480px) { */

	body {
		height: 100vh;
		margin: 0;
	}

	.fixed_container {
		width: 100%;
		box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
		height: auto;
		position: relative;
		overflow: auto;
	}

	.dymanic_container {
		width: 100%;
		flex-basis: 100%;
		flex-wrap: wrap;
		height:auto;
		overflow: auto;
	}


	.flip-card {
		flex: 100%;
		max-width: 100%;

	}

	.container{
		padding: 0px;
	}
	.intro_wrapper {
		margin-top: 20%;
		padding-bottom: 0px;
	}

	.socialmedia_wrapper {
		flex-basis: 40%;
		margin: auto auto 10%;

	}

	.welcoming_container {
		font-size: 3em;
		text-align: center;
	}

	.welcoming_container p {
		margin-bottom: 2%;
	}

	.brief_container {
		font-size: 1.5em;
		text-align: center;


	}

	.mission_container {
		width: 80%;
		margin-bottom: 20%;
		text-align: center;

	}


	.flip-card {
		margin-top: 10%;
		flex: 100%;
		max-width: 100%;
		height: 530px;
	}


	.projects {
		display: flex;
		justify-content: center;
		width: 85%;
		margin: auto;
	}

	.project_type, .project_brief {

		font-size: 0.9em;


	}

	h4 {
		font-size: 1.3em;

	}

	.mission_container {

		font-size: 0.9em;

	}

	.tag p {
		font-size: 0.9em;

	}

	.nav_container {
		margin-right: 0;
		width: 100%;
	}

	nav{
		float: none;
	}
	nav ul {
		align-items: center;
		justify-content: center;
	}

	.aboutme_container{
		padding: 15%;
		font-size: 1em;
		line-height: 1.5em;

	}

}

/* Medium devices such as tablets (640px and below) */
@media only screen and (min-width: 481px) and (max-width: 640px){
/* @media only screen and (max-width: 640px) { */

	body {
		height: 100vh;
		margin: 0;
	}

	.fixed_container {
		width: 100%;
		box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
		height: auto;
		position: relative;
		overflow: auto;
	}

	.dymanic_container {
		width: 100%;
		flex-basis: 100%;
		flex-wrap: wrap;
		height:auto;
		overflow: auto;
	}


	.flip-card {
		flex: 100%;
		max-width: 100%;

	}

	

	.intro_wrapper {
		margin-top: 20%;
		padding-bottom: 0px;
	}

	.socialmedia_wrapper {
		flex-basis: 40%;
		margin: auto auto 10%;

	}

	.welcoming_container {
		font-size: 3.3em;
		text-align: center;
	}

	.welcoming_container p {
		margin-bottom: 2%;
	}

	.brief_container {
		font-size: 1.5em;
		text-align: center;


	}

	.mission_container {
		width: 60%;
		margin-bottom: 20%;
		text-align: center;

	}


	.flip-card {
		margin-top: 10%;
		flex: 100%;
		max-width: 100%;
		height: 600px;
	}


	.projects {
		display: flex;
		justify-content: center;
		width: 85%;
		margin: auto;
	}

	.project_type, .project_brief {

		font-size: 0.9em;


	}

	h4 {
		font-size: 1.3em;

	}

	.mission_container {

		font-size: 0.8em;

	}

	.tag p {
		font-size: 0.9em;

	}

	.nav_container {
		margin-right: 0;
		width: 100%;
	}

	nav{
		float: none;
	}
	nav ul {
		align-items: center;
		justify-content: center;
	}

	.aboutme_container{
		padding: 15%;
		font-size: 1em;
		line-height: 1.5em;

	}

	
}

/* Largest devices such as desktops (960px and below) */
@media only screen and (min-width: 641px) and (max-width: 960px){
/* @media only screen and (max-width: 960px) { */

	.fixed_container{
		width: 35%;
	  }

	.dymanic_container{
		width: 65%;
		flex-basis: auto;

	}

	.projects{
		display: flex;
		justify-content:space-around;
		width: 100%;
		flex-wrap: wrap;
		display: -webkit-flex;
		display: -ms-flexbox;
		-webkit-flex-wrap: wrap;
	}

	.flip-card{
		flex: 50%;
		max-width: 48%; 
		height: 550px;
		
	}

	.nav_container {
		margin-top: 3%;
		margin-right: 0%;
		flex-basis: 100%;
	}

	.welcoming_container {

		font-size: 3em;
	
	}

	.brief_container {
	
		font-size: 1.3em;

	}

	.mission_container {
		display: block;
		width: 60%;
		margin: 10% auto auto;
		font-size: 0.8em;
		line-height: 1.5em;
	}

	.project_brief{
		font-size: 0.8em;
	}

	.project_type{
		font-size: 0.8em;
	}

	h4 {
		font-family: "Oswald", sans-serif;
		font-weight: 600;
		font-size: 1.2em;
		margin: 1% 4%;
	}

	.tag p {
		font-size: 0.8em;

	}

	.socialmedia_wrapper {

		flex-basis: 50%;
	}

	.aboutme_container{
		font-size: 0.9em;
	}

	nav{
		margin-right: 8%;
	}

}

/* Largest devices such as desktops (1200px and below) */
@media only screen and (min-width: 961px) and (max-width: 1200px){

	.fixed_container{
		width: 35%;
	  }

	.dymanic_container{
		width: 65%;
		flex-basis: auto;

	}

	.projects{
		display: flex;
		justify-content:space-around;
		width: 100%;
		flex-wrap: wrap;
		display: -webkit-flex;
		display: -ms-flexbox;
		-webkit-flex-wrap: wrap;
	}

	.flip-card{
		flex: 50%;
		max-width: 45%; 
		height: 550px;
		
	}

	.nav_container {
		margin-top: 3%;
		margin-right: 0%;
		flex-basis: 100%;
	}

	.welcoming_container {

		font-size: 3em;
	
	}

	.brief_container {
	
		font-size: 1.3em;

	}

	.mission_container {
		display: block;
		width: 60%;
		margin: 10% auto auto;
		font-size: 0.8em;
		line-height: 1.5em;
	}

	.project_brief{
		font-size: 0.9em;
	}

	.project_type{
		font-size: 0.8em;
	}

	h4 {
		font-family: "Oswald", sans-serif;
		font-weight: 600;
		font-size: 1.2em;
		margin: 1% 4%;
	}

	.tag p {
		font-size: 1em;

	}

	.socialmedia_wrapper {

		flex-basis: 50%;
	}

	.aboutme_container{
		font-size: 0.9em;
		padding: 23%;
	}

	nav{
		margin-right: 8%;
	}
}

/* Largest devices such as desktops (1800px and below) */
@media only screen and (min-width: 1201px) and (max-width: 1800px){
/* @media only screen and (max-width: 1800px) { */

	.fixed_container{
		width: 30%;
	  }

	.dymanic_container{
		width: 70%;
		flex-basis: auto;

	}

	.intro_wrapper {
		
		margin-top: 20%;
	
	}

	.projects{
		display: flex;
		justify-content:space-around;
		width: 100%;
		flex-wrap: wrap;
		display: -webkit-flex;
		display: -ms-flexbox;
		-webkit-flex-wrap: wrap;
		padding: 3%;
	}

	.flip-card{
		flex: 30%;
		max-width: 30%; 
		height: 650px;
		
	}

	.nav_container {
		margin-top: 3%;
		margin-right: 0%;
		flex-basis: 100%;
	}

	.welcoming_container {

		font-size: 4em;
	
	}

	.brief_container {
	
		font-size: 2em;

	}

	.mission_container {
		display: block;
		width: 60%;
		margin: 10% auto auto;
		font-size: 1.0em;
		line-height: 1.5em;
	}

	.project_brief{
		font-size: 0.9em;
	}

	.project_type{
		font-size: 0.8em;
	}

	h4 {
		font-family: "Oswald", sans-serif;
		font-weight: 600;
		font-size: 1.5em;
		margin: 1% 4%;
	}

	.tag p {
		font-size: 1em;

	}

	.socialmedia_wrapper {

		flex-basis: 50%;
	}

	.aboutme_container{
		font-size: 1.1em;
		padding: 15% 25%;
		
	}

	nav{
		margin-right: 5%;
	}
	
}

/* Largest devices such as desktops (1800px and below) */
@media only screen and (min-width: 1801px) {

	.fixed_container{
		width: 30%;
	  }

	.dymanic_container{
		width: 70%;
		flex-basis: auto;

	}

	.intro_wrapper {
		
		margin-top: 20%;
	
	}

	.projects{
		display: flex;
		justify-content:space-around;
		width: 100%;
		flex-wrap: wrap;
		display: -webkit-flex;
		display: -ms-flexbox;
		-webkit-flex-wrap: wrap;
		padding: 3%;
	}

	.flip-card{
		flex: 30%;
		max-width: 30%; 
		height: 620px;
		
	}

	.nav_container {
		margin-top: 3%;
		margin-right: 0%;
		flex-basis: 100%;
	}

	.welcoming_container {

		font-size: 4em;
	
	}

	.brief_container {
	
		font-size: 2em;

	}

	.mission_container {
		display: block;
		width: 60%;
		margin: 10% auto auto;
		font-size: 1.0em;
		line-height: 1.5em;
	}

	.project_brief{
		font-size: 1em;
	}

	.project_type{
		font-size: 1em;
	}

	h4 {
		font-family: "Oswald", sans-serif;
		font-weight: 600;
		font-size: 1.5em;
		margin: 1% 4%;
	}

	.tag p {
		font-size: 1em;

	}

	.socialmedia_wrapper {

		flex-basis: 50%;
	}

	.aboutme_container{
		font-size: 1.1em;
		padding: 15% 25%;
		
	}

	nav{
		margin-right: 5%;
	}
	
}